<template>
  <px-form class="custom-form-ui equip-form" :model="form" label-position="right" label-width="120px" @submit.prevent>
    <px-row :gutter="24">
      <px-col :span="5">
        <px-form-item label="备件类型">
          <px-tree-select
            ref="treeRef"
            :model-value="form.typeCode"
            clearable
            filterable
            :props="defaultProps"
            :data="treeData"
            check-strictly
            placeholder="请选择备件类型（树状图）"
            node-key="code"
            style="width: 100%"
            @node-click="nodeClick"
          />
        </px-form-item>
      </px-col>
      <px-col :span="5">
        <px-form-item label="备件名称">
          <px-input
            v-model="form.sparePartName"
            placeholder="请输入备件名称"
            maxlength="50"
            @blur="form.sparePartName = $event.target.value.trim()"
            @keyup.enter="handleSearch"
          >
            <template #suffix>
              <px-icon style="cursor: pointer" @click="handleSearch">
                <Search />
              </px-icon>
            </template>
          </px-input>
        </px-form-item>
      </px-col>
      <px-col :span="5">
        <px-form-item label="规格类型">
          <px-input
            v-model="form.specification"
            placeholder="请输入规格类型"
            maxlength="50"
            @blur="form.specification = $event.target.value.trim()"
            @keyup.enter="handleSearch"
          >
            <template #suffix>
              <px-icon style="cursor: pointer" @click="handleSearch">
                <Search />
              </px-icon>
            </template>
          </px-input>
        </px-form-item>
      </px-col>
      <px-col :span="5">
        <px-form-item label="日期" prop="date">
          <px-date-picker
            v-model="form.date"
            type="daterange"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </px-form-item>
      </px-col>
      <px-col :span="4">
        <px-button type="primary" @click="handleSearch">查询</px-button>
        <px-button @click="handleReset">重置</px-button>
      </px-col>
    </px-row>
  </px-form>
</template>

<script lang="ts" setup>
import { ref, toRefs } from "vue";

import { queryEquipTypeTree } from "@/api/erc/spareParts";

import type { Params } from "../type";

interface PropsType {
  form: Params;
}

interface EmitsType {
  (e: "submit"): void;
  (e: "reset"): void;
}

const defaultProps = {
  children: "children",
  label: "name",
  value: "code"
};

const props = defineProps<PropsType>();
const emits = defineEmits<EmitsType>();

const { form } = toRefs(props);

const treeData = ref([]);
const treeRef = ref(null);

const queryTree = async () => {
  const params = {
    name: ""
  };
  const data: any = await queryEquipTypeTree(params);
  treeData.value = data;
};

queryTree();

const nodeClick = e1emData => {
  form.value.typeCode = e1emData.code;
};

const handleSearch = () => {
  emits("submit");
};
const handleReset = () => {
  emits("reset");
  if (treeRef.value?.setCurrentKey) {
    treeRef.value?.setCurrentKey(null);
  }
};
</script>
